<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>页面仔写界面</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <script>
        (function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth > 400 & clientWidth <= 500) {
                        clientWidth = 400;
                    }
                    if (clientWidth > 500) {
                        clientWidth = 500;
                    }
                    var fontSize = 20 * (clientWidth / 375);
                    docEl.style.fontSize = fontSize + 'px';

                    var dpi = window.devicePixelRatio;
                    var viewport = document.querySelector('meta[name="viewport"]');

                    docEl.setAttribute('data-dpi', dpi);
                    var scale = 1 / dpi;
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>

<body>
    <div id="root"></div>
</body>

</html>